<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue组件拆分-局部组件</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 挂载点，模板，实例之间的关 -->
		<div id="root">
			<input v-model="inputValue" />
			<button @click="handleClick">提交</button>
			<ul>
				<!-- <li v-for="(item ,index) of list " :key=index>{{item}}</li> -->
				<todo-item></todo-item>
			</ul>
		</div>
		<script>
			//全局组件
			// Vue.component('todo-item',{
			// 	template:'<li>item</li>'
			// })
			//局部组件
			var todoItem={
				template:'<li>item</li>'
			}
			
			new Vue({
				el: "#root",
				components:{
					'todo-item':todoItem
				},
				data: {
					inputValue: "",
					list: [],
				},
				methods: {
					handleClick() {
						this.list.push(this.inputValue);
						this.inputValue="";
					},
				}

			})
		</script>
	</body>
</html>
